<template>
  <div class="main">
    <el-tabs class="tabs" type="border-card">
      <el-tab-pane v-for="(tab, index) in list" :key="tab.key" :label="tab.name">
        <tinymce v-if="list[index]" :height="600" v-model="list[index].value" ></tinymce>
        <div v-if="rightsButtons['edit']" class="btn-container">
          <el-button class="filter-item" type="success" @click="save(index)">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getHelpList, updateHelpList } from '@/api/bizhibo'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'help',
  components: {
    Tinymce
  },
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await getHelpList(this.listQuery)
        this.list = data
      } catch (error) {
        console.log(error)
      }
    },
    async save(index) {
      try {
        const { data } = await updateHelpList(this.list[index])
        this.$message({
          type: 'success',
          message: `【${this.list[index].name}】：保存成功`
        })
      } catch (error) {
        console.log(error)
        this.$message({
          type: 'error',
          message: err.message
        })
      }
    }
  }
}
</script>
<style>
.btn-container {
  text-align: center;
  padding-top: 15px;
}
</style>
